<template>
  <div>
    <Form :model="searchObj" :label-width="80" inline>
      <FormItem label="活动地点:">
        <Input v-model="searchObj.activity_place" clearable placeholder="请输入活动地点"/>
      </FormItem>
      <FormItem label="活动时间:">
        <DatePicker v-model="searchObj.activity_time" type="date" placeholder="请选择时间" placement="bottom-end"></DatePicker>
      </FormItem>
      <Button type="success" @click="searchAction" class="btn-style">
        <Icon type="ios-search"/>
        搜索
      </Button>
      <Button type="primary" @click="addPlot">
        <Icon type="md-add"/>
        添加
      </Button>
    </Form>
    <div class="table-style">
      <Table border :columns="columnsPlot" :data="plotData" :loading="tableLoading">
        <template slot-scope="{row,index}" slot="state">
          <template v-if="row.state == '0'">未开启</template>
          <template v-if="row.state == '1'">开启</template>
          <template v-if="row.state == '2'">结束</template>
        </template>
        <template slot-scope="{row,index}" slot="activity_state">
          <template v-if="row.activity_state == '0'">未总结</template>
          <template v-if="row.activity_state == '1'">已总结</template>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <template v-if="row.state == '0'">
            <Button type="primary" size="small" @click="editPlot(row,index)" class="btn-style">编辑</Button>
            <Button type="success" size="small" @click="implement(row.id)">执行</Button>
          </template>
          <template v-if="row.state==='1'">
            <Button type="error" size="small" @click="endOfActivity(row.id)" class="btn-style">结束</Button>
            <Button type="warning" size="small" @click="viewPlotDetails(row)">查看详情</Button>
          </template>
          <template v-if="row.state==='2'&&row.activity_state == '0'">
            <Button type="primary" size="small" @click="plotDetails(row)" class="btn-style">总结</Button>
            <Button type="warning" size="small" @click="viewSummaryDetails(row)">总结详情</Button>
          </template>
          <template v-if="row.state==='2'&&row.activity_state == '1'">
            <Button type="warning" size="small" @click="viewAllDetails(row)">查看详情</Button>
          </template>
        </template>
      </Table>
      <plot-option :is-show="plotModal" :modalTitle="plotTitle" :formData="formPlot" @cancel="cancel"
                   @saveHandle="savePlot"></plot-option>
      <activity-summary :isShow="summaryModal" :modalTitle="summaryTitle" @cancel="cancel"></activity-summary>
      <plot-detail :showPlotDetail="showPlotModal" :form-data="formPlotData" @cancel="cancel"></plot-detail>
    </div>
    <div class="page">
      <Page show-sizer show-total :current="pageObj.pageNo" :page-size="pageObj.pageSize"
            :total="pageObj.totalRecord"
            @on-change="getPageNo" :page-size-opts="[10,20,50,100]" @on-page-size-change="pageSizeChange"/>
    </div>
  </div>
</template>

<script>
import { getActivityPlanningList, updatePlanningState, updateActivityPlanning } from '@/api/activityPlanning'
import PlotOption from './components/plot-option/index'
import ActivitySummary from './components/activity-summary/index'
import PlotDetail from './components/plot-detail/index'

export default {
  name: 'ActivityPlot',
  components: { PlotDetail, ActivitySummary, PlotOption },
  data () {
    return {
      searchObj: {},
      columnsPlot: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'

        },
        {
          title: '活动时间',
          key: 'activity_time',
          align: 'center',
          width: '150'

        },
        {
          title: '活动地点',
          key: 'activity_place',
          align: 'center'

        },
        {
          title: '参与人员范围',
          key: 'activity_object',
          align: 'center'
        },
        {
          title: '活动状态',
          slot: 'state',
          align: 'center',
          width: '150'
        },
        {
          title: '活动总结状态',
          slot: 'activity_state',
          align: 'center',
          width: '150'
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center'
        }
      ],
      plotData: [],
      formPlot: {},
      pageObj: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      tableLoading: false,
      plotModal: false,
      plotTitle: '',
      summaryModal: false,
      summaryTitle: '',
      showPlotModal: false,
      formPlotData: {}
    }
  },
  methods: {
    init () {
      const param = {
        pageNo: this.pageObj.pageNo,
        pageSize: this.pageObj.pageSize,
        activity_place: this.searchObj.activity_place,
        activity_time: this.$common.xeUtils.toDateString(this.searchObj.activity_time)
      }
      getActivityPlanningList(param).then(ret => {
        const data = ret.data
        if (data.errcode === 0) {
          this.tableLoading = false
          this.plotData = data.data.results
          this.pageObj.totalRecord = data.data.totalRecord
        } else {
          this.error(data)
          this.tableLoading = false
        }
      })
    },
    searchAction () {
      this.init()
    },
    addPlot () {
      this.plotModal = true
      this.plotTitle = '添加活动策划'
      this.formPlot = {}
    },
    savePlot () {
      this.plotModal = false
      this.init()
    },
    cancel () {
      this.plotModal = false
      this.summaryModal = false
      this.showPlotModal = false
    },
    editPlot (row) {
      this.plotModal = true
      this.plotTitle = '编辑活动策划'
      this.formPlot = this.$common.xeUtils.clone(row)
    },
    implement (val) {
      if (val !== '' || val !== null) {
        this.$Modal.confirm({
          title: '确认要执行活动？',
          onOk: () => {
            updatePlanningState({ id: val }).then(ret => {
              if (ret.data.errcode === 0) {
                this.init()
              } else {
                this.error(ret.data)
              }
            })
          }
        })
      }
    },
    endOfActivity (val) {
      this.$Modal.confirm({
        title: '确认要结束活动？',
        onOk: () => {
          updateActivityPlanning({ id: val }).then(ret => {
            if (ret.data.errcode === 0) {
              this.init()
            } else {
              this.error(ret.data)
            }
          })
        }
      })
    },
    viewPlotDetails (row) {
      this.showPlotModal = true
      this.formPlotData = row
    },
    plotDetails (val) {
      this.summaryModal = true
      this.summaryTitle = '添加活动总结'
    },
    viewSummaryDetails () {
    },
    viewAllDetails () {
    },
    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      this.init()
    },
    pageSizeChange (pageSize) {
      this.pageObj.pageSize = pageSize
      this.init()
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '添加成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
  .btn-style {
    margin-right: 10px;
  }

  .table-style {
    margin-top: 10px;
  }

  .page {
    text-align: right;
    margin-top: 10px;
    font-size: 12px;
  }

  /deep/ .ivu-table-overflowX {
    overflow-x: hidden;
  }
</style>
